<script setup>
import { computed } from 'vue'

const props = defineProps({
  data: Array
})

const heatmapData = computed(() => {
  return props.data.reduce((acc, cur) => {
    acc[cur.month] = cur.count
    return acc
  }, {})
})
</script>

<template>
  <div class="heatmap-grid">
    <div 
      v-for="(month, index) in Object.keys(heatmapData)"
      :key="index"
      class="heatmap-cell"
      :style="{
        backgroundColor: `rgba(22,93,255, ${heatmapData[month]/50})`
      }"
    >
      {{ month.split('-')[1] }}
    </div>
  </div>
</template>